import React, { Component } from 'react'
import { CategoryShowWrap } from "../styledCategory/styled.js"

import {get} from "../../../utils/http"

export default class CategoryShow extends Component {

    state = {
        dataSource: null,
        currentItem: ""
    }

    async componentDidMount() {
        let result = await get({url: "/api/category"})
        console.log(result.data);
        this.setState({dataSource: result.data, currentItem: "热门"})
    }

    handleClick = (value) => {
        return () => {
            this.setState({currentItem: value})
        }
    }

    render() {
        let data = this.state.dataSource ? Object.keys(this.state.dataSource["category"]) : []
        let contents = this.state.dataSource ? this.state.dataSource["category"][this.state.currentItem] : []
        return (
            <CategoryShowWrap>
                <div>
                    <ul>
                        {/* <li>热门</li>
                        <li className="active">菜式</li> */}
                        {
                            data.map(value => {
                                return (
                                    this.state.currentItem === value ? 
                                    <li key={value} className="active">{ value }</li>
                                    : <li key={value} onClick={this.handleClick(value)}>{ value }</li>
                                )
                            })
                        }
                    </ul>
                </div>

                <div>
                    <ul>
                        {
                            contents.map(value => {
                                return (
                                    <li key={value}>{ value }</li>
                                )
                            })
                        }
                    </ul>
                </div>
            </CategoryShowWrap>
        )
    }
}
